<template>
  <div class="container">
    <el-dialog
      :visible.sync="isShowDialog"
      width="600px"
      :modal="false"
      :close-on-click-modal="false"
      class="thisblack-bgc"
    >
      <span slot="title">
        <span class="head-title">设置主攻行业</span>
        <span class="head-tip">最多可设置3个</span>
      </span>
      <div v-loading="loading" class="content">
        <ul class="checkbox-ul">
          <el-checkbox-group
            v-model="industryVOS"
            size="small"
            :max="industryVOS.length > 3 ? industryVOS.length : 3"
          >
            <el-checkbox
              v-for="(item, index) in imIndustryData"
              :key="index"
              class="check-item"
              border
              :label="item.imiid"
            >
              {{ item.iminame }}
              <svg-icon class="item-svg" icon-class="selected" />
            </el-checkbox>
          </el-checkbox-group>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="getEditIndustry">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
export default {
  name: 'SuperAdmin',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    imIndustryList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      loading: false,
      industryVOS: [], // 主攻行业
      imIndustryData: []
    }
  },
  computed: {
    isShowDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('closeEvents', 'isMainIndustry', val)
      }
    }
  },
  created () {
    this.getImIndustry()
  },
  methods: {
    closeDialog () {
      this.$emit('closeEvents', 'isMainIndustry', false)
    },
    async getImIndustry () {
      const _this = this
      _this.loading = true
      const { data } = await api.imlist.getImIndustry()
      _this.imIndustryData = data
      _this.imIndustryList.map(item => {
        _this.industryVOS.push(item.imiid)
      })
      _this.loading = false
    },
    async getEditIndustry () {
      const params = []
      this.industryVOS.map(res => {
        this.imIndustryData.filter(item => {
          if (res === item.imiid) {
            params.push(item)
          }
        })
      })
      await api.imlist.updateMainIndustry(params)
      this.$emit('closeEvents', 'isMainIndustry', false)
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/index.scss';
  .container {
    .thisblack-bgc {
      background: rgba(0,0,0,.5);
    }
    ::v-deep .el-dialog {
      .el-dialog__header {
        padding: 12px 16px;
        background: #F5F8FC;
        .head-title {
          font-size: 16px;
          color: #202933;
          font-weight: 500;
          line-height: 1.5;
        }
        .head-tip {
          font-size: 14px;
          color: #B9C0C7;
          font-weight: 400;
          line-height: 1.5;
          margin-left: 10px;
          a{
            cursor: pointer;
            color: #0C7FF2;
          }
        }
      }
      .el-dialog__body {
        .content {
          .checkbox-ul {
            width: 100%;
            text-align: center;
            white-space: pre-wrap;
            margin: 20px 0;
            .el-checkbox-group {
              width: 505px;
              margin: 0 auto;
              @include flex(row, center, flex-start);
              flex-wrap: wrap;
              .check-item {
                width: 110px;
                height: 32px;
                padding: 0;
                margin: 0 16px 16px 0;
                border: 1px solid #E5EAF0;

                &:nth-child(4n) {
                  margin-right: 0;
                }
                &.is-checked {
                  border: 1px solid #0C7FF2;
                  .el-checkbox__label {
                    .svg-icon {
                      display: block;
                    }
                  }
                }
                .el-checkbox__input {
                  display: none;
                }
                .el-checkbox__label {
                  width: 100%;
                  height: 100%;
                  line-height: 32px;
                  font-size: 14px;
                  overflow: hidden;
                  position: relative;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  padding: 0 4px;
                  box-sizing: border-box;
                  text-align: center;
                  font-weight: 400;
                  .svg-icon {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
      .el-dialog__footer {
        padding: 24px 0;
        text-align: center;
        border-top: 1px solid #E5EAF0;
        .el-button {
          padding: 8px 16px;
          line-height: 1;
        }
      }
    }
  }
</style>
